<template>
	<uni-transition :show="show" mode-class="slide-right" :duration="500">
		<view style="background-color: #F4FAF8; height: 2000rpx;">
			<tabbar title="修改昵称" v-model:show="show"/>
			<view class="flex justify-center" style="margin-top: 110rpx;">
				<view class="box">
					<text class="title">以后怎么称呼？</text>
					<input type="text" placeholder="点击输入新的昵称" placeholder-class="pla" maxlength="8" v-model="username"/>
				</view>
			</view>
			<view class="flex justify-center">
				<button class="cu-btn bg-green-custom" @click="updateUsername">继续</button>
			</view>
		</view>
	</uni-transition>
</template>

<script setup lang="ts">
import uniTransition from '@/uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';
import { useSave } from '@/store/index';
import { userUpdate, type userputType } from '@/api/user_api';

//定义一个布尔值控制返回事件
const show:Ref<boolean> = ref(false);

//定义username
const username:Ref<string> = ref('')

const changePasswordStore = useSave()

//定义更新用户名函数
const updateUsername = async ()=>{
	//更新状态机
	if(username.value==''){
		uni.showToast({
			title: '用户名不能为空',
			icon: 'none',
			duration: 2000
		})
		return
	}
	if(changePasswordStore.userInfo?.username){
		changePasswordStore.userInfo.username = username.value
		uni.showToast({
			title: '用户名更新成功',
			icon: 'none',
			duration: 2000
		})
		console.log(changePasswordStore.userInfo?.username);
	}
	//更新数据库
	const usernamedDate:userputType = {username:username.value}//数据包
	const usernameUpdateTobase = await userUpdate(usernamedDate)
	console.log(usernameUpdateTobase);
	// 延迟返回
	setTimeout(() => {
		uni.navigateBack({delta:1});
	}, 1500);
}
	


// 生命周期，保证动画效果
onMounted(() => {
  // 延迟显示以触发动画
  setTimeout(() => {
    show.value = true;
  }, 50);
});


</script>

<style lang="scss">
.box{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 650rpx;
	background-color: #fff;
	border-radius: 40rpx;
	box-shadow: 5rpx 5px 50rpx rgba(147,160,151, 0.2);
	padding-bottom: 70rpx;
}
.title{
	font-size: 33rpx;
	font-weight: bold;
	margin-top: 70rpx;
}
button{
	width: 450rpx;
	margin-top: 60rpx;
	color: #fff;
	background-color: #2DD296;
	border-radius: 20rpx;
}
input{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	width: 400rpx;
	font-size: 50rpx;
	margin-top: 50rpx;
	text-align: center;
	.pla{
		font-size: 50rpx;
		color: #BAC0BC;
	}
}

</style>
